<template>
    <div class="flex">
        <div class="w-[100%] h-[100%] relative">
            <div ref="container" id="container" :style="{ width: containerWidth ? containerWidth + 'px' : 'auto' }">
            </div>
        </div>
        <!-- 编辑区域 -->
        <div class="w-500">
            <div v-if="cutImg">
                <div class="flex items-center mb-12">
                    <div class="mr-12 h-16 w-4 rounded-l-2 bg-primary"></div>
                    <div>标注区域</div>
                </div>
                <n-image width="200" :src="cutImg" alt="标注图" />
            </div>
        </div>
    </div>
</template>

<script setup>
import ImgAnnotate from './konva.js';
import bus from './bus.js'
import { dataURLtoFile } from "@/utils"
const annotate = ref(null);
const canvasData = ref(null);

// 标注的图片
const cutImg = ref(null);
// 数据回填逻辑
const initData = ref([
]);
// 容器大小
const containerWidth = 1000;
const container = ref(null);

const canvasSize = ref({ width: 0, height: 0 });
onMounted(() => {
    let isUpdate = false;
    let scale = 1;
    if (window.innerWidth < containerWidth) {
        isUpdate = true;
        scale = window.innerWidth / containerWidth; // 屏幕缩放
        containerWidth = window.innerWidth;
    }
    let imgSrc = ""; // 图片链接
    let el = container.value;
    let imageObj = new Image();
    imageObj.src = imgSrc;
    imageObj.crossOrigin = 'anonymous';
    imageObj.onload = () => {
        let imgScale = containerWidth / imageObj.width; // 图片缩放大小
        // let aspectRatio = imageObj.width / imageObj.height; // 计算宽高比
        // sessionStorage.setItem('aspectRatio', aspectRatio);

        if (isUpdate) {
            containerWidth = window.innerWidth;
            initData.value.forEach(item => {
                item.x = setToFixed(item.x * scale, 2);
                item.y = setToFixed(item.y * scale, 2);
                item.width = setToFixed(item.width * scale, 2);
                item.height = setToFixed(item.height * scale, 2);
            })
        }

        let width = setToFixed(imageObj.width * imgScale, 2);
        let height = setToFixed(imageObj.height * imgScale, 2);

        canvasSize.value = {
            width,
            height,
        }
        annotate.value = new ImgAnnotate({ el, canvasSize: canvasSize.value, imageObj, initData: initData.value });
        // 监听canvasData事件，获取绘制的矩形坐标信息
        bus.on('canvasData', (data) => {
            canvasData.value = data
            // .map(item => {
            //   let rect = item.findOne('Rect');
            //   if (rect) {
            //     return {
            //       x: rect.attrs.x,
            //       y: rect.attrs.y,
            //       width: rect.attrs.width,
            //       height: rect.attrs.height,
            //     }
            //   }
            // })
            console.log('canvasData', canvasData.value);
        });
        // 监听标注生成的file文件
        bus.on('urlList', (url) => {
            console.log(url, "file");
            cutImg.value = url;
            let file = dataURLtoFile(url);
        });
    }
});

const setToFixed = (total, num) => {
    return Number(total.toFixed(num))
}
</script>

<style scoped></style>